<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>湖南省自来水公司营销管理信息系统</title>

    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">

    <link rel="stylesheet" href="../sweetalert2/sweetalert2.min.css">
    <script src="../sweetalert2/sweetalert2.min.js"></script>
    <!-- IE support -->
    <script src="../sweetalert2/es6-promise.min.js"></script>

    <!-- Promise.finally support -->
    <script src="../sweetalert2/finally.js"></script>

    <style type="text/css">
        #t_meterCount {
            text-align: right;
            width: 30px;
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript">
        function setMeter() {
            var n = $('#t_meterCount').val();
            if ($("#userLx").val() == '私户' && n > 1) {
                $('#t_meterCount').val(1)
                alert('当前用户类型为私户')
                return;
            }
            if (isNaN(n)) return;    //不是数字
            if (n <= 0 || n > 100) return; //不合理
            var rows = $('table.data tbody tr');
            if (rows.length == n) return; //行数相同

            if (rows.length < n) {//需增加行数
                for (var i = rows.length; i < n; i++) {
                    $('table.data tbody').append('<tr><td>' + (i + 1) +
                        '</td><td><input name="list[' + i + '].userName"/></td><td><input name="list[' + i + '].phone"/></td><td><input name="list[' + i + '].sMSPhone"/></td><td><input name="list[' + i + '].address"/></td><td></td></tr>');
                }

            } else {//需减少行数
                $('table.data tbody tr:gt(' + (n - 1) + ')').remove();
            }


        }
    </script>
    <script>
        const u = new URLSearchParams(location.search);
        const uid = u.get('orderNo');
        const uname = u.get('userName');
        const type = u.get('userType');
    </script>
</head>

<body>

<div id="wrapper">
    <div id="bool">
        <script>window.onload = function () {
            $("#bool").load("../ming.html");
        }</script>
    </div>
    <!--<div id="header">

        <div class="content_pad">
            <h1><a href="../workspace.html">湖南省自来水公司营销管理信息系统</a></h1>

            <ul id="nav">

                <li class="nav_dropdown nav_icon">
                    <a href="javascript:;"><span class="ui-icon ui-icon-wrench"></span>业扩工程</a>

                    <div class="nav_menu">
                        <ul>
                            <li><a href="../page/be__request.html">01 用户申请</a></li>
                            <li><a href="../page/be__audit.html">02 初步审核</a></li>
                            <li><a href="../page/be__pay.html">03 交施工费</a></li>
                            <li><a href="../page/be__billclear.html">04 水费清算</a></li>
                            <li><a href="../page/be__contract.html">05 供水协议</a></li>
                            <li><a href="../page/be__working.html">06 施工竣工</a></li>
                            <li><a href="../page/be__open.html">07 通水停水</a></li>
                            <li><a href="../page/be__save.html">08 档案存档</a></li>
                            <li><a href="../page/be_order.html">工单管理</a></li>
                            <li><a href="../page/be_abort.html">终止工单</a></li>
                            <li><a href="../page/be_reportProgress.html">业扩工程进度</a></li>
                            <li><a href="../page/be_reportMoney.html">业扩收费报表</a></li>
                        </ul>

                    </div>
                </li>

                <li class="nav_dropdown nav_icon">
                    <a href="javascript:;"><span class="ui-icon ui-icon-person"></span>用户管理</a>

                    <div class="nav_menu">
                        <ul>
                            <li><a href="../page/user_search.html">用户查询</a></li>
                            <li><a href="../page/user_add.html">快捷新户</a></li>
                            <li><a href="../page/user_changeName.html">快捷过户</a></li>
                            <li><a href="../page/user_changeBank.html">快捷代扣</a></li>
                            <li><a href="../page/user_changeMeter.html">快捷换表</a></li>
                            <li><a href="../page/user_changeFormula.html">快捷重签</a></li>
                            <li><a href="../page/user_delete.html">快捷销户</a></li>
                            <li><a href="../page/user_reportShortcut.html">快捷操作记录</a></li>
                            <li><a href="../page/user_docNum.html">档案号管理</a></li>
                            <li><a href="../page/user_sendMsg.html">短信群发</a></li>
                        </ul>

                    </div>
                </li>

                <li class="nav_dropdown nav_icon">
                    <a href="javascript:;"><span class="ui-icon ui-icon-pencil"></span>抄表管理</a>

                    <div class="nav_menu">
                        <ul>
                            <li><a href="../page/rd_volume.html">表册管理</a></li>
                            <li><a href="../page/rd_init.html">抄表初始化</a></li>
                            <li><a href="../page/rd_task.html">任务分配</a></li>
                            <li><a href="../page/rd_enter.html">抄表录入</a></li>
                            <li><a href="../page/rd_audit.html">抄表审核</a></li>
                            <li><a href="../page/rd_reportReading.html">抄表情况查询</a></li>
                            <li><a href="../page/rd_reportVolumeReading.html">抄表统计报表</a></li>
                            <li><a href="../page/rd_reportZero.html">零吨位用户查询</a></li>
                            <li><a href="../page/rd_reportMaxValue.html">最大码值修正记录</a></li>
                            <li><a href="../page/rd_reportCPreAmount.html">底码修正记录</a></li>
                            <li><a href="../page/rd_reportMeterCheck.html">水表周检报表</a></li>
                        </ul>

                    </div>
                </li>

                <li class="nav_dropdown nav_icon">
                    <a href="javascript:;"><span class="ui-icon ui-icon-star"></span>收费管理</a>

                    <div class="nav_menu">
                        <ul>
                            <li><a href="../page/pay_window.html">窗口收费</a></li>
                            <li><a href="../page/pay_batch.html">批量收费</a></li>
                            <li><a href="../page/pay_invoiceReprint.html">发票补开/作废</a></li>
                            <li><a href="../page/pay_reportDebts.html">欠费报表</a></li>
                            <li><a href="../page/pay_reportPay.html">收费情况报表</a></li>
                            <li><a href="../page/pay_reportMonthRecycle.html">月资金回收情况报表</a></li>
                            <li><a href="../page/pay_reportBalance.html">用户预收情况报表</a></li>
                            <li><a href="../page/pay_reportWaterType.html">各类用水统计总表</a></li>
                        </ul>

                    </div>
                </li>

                <li class="nav_dropdown nav_icon">
                    <a href="javascript:;"><span class="ui-icon ui-icon-script"></span>发票管理</a>

                    <div class="nav_menu">
                        <ul>
                            <li><a href="../page/inv_invoiceManage.html">发票总表</a></li>
                            <li><a href="../page/inv_invoiceIn.html">发票入库</a></li>
                            <li><a href="../page/inv_invoiceOut.html">发票出库</a></li>
                            <li><a href="../page/inv_invoiceArchive.html">发票交票</a></li>
                            <li><a href="../page/inv_invoiceReportOut.html">发票出库情况查询</a></li>
                            <li><a href="../page/inv_invoiceReportEmp.html">收费人员发票查询</a></li>
                            <li><a href="../page/inv_invoiceReportArchive.html">发票交票情况查询</a></li>
                            <li><a href="../page/inv_invoiceReportUse.html">发票使用情况查询</a></li>
                            <li><a href="../page/inv_invoiceReportMoneySum.html">销账汇总报表</a></li>
                            <li><a href="../page/inv_invoiceReportMoneyDetail.html">销账明细报表</a></li>
                        </ul>
                    </div>
                </li>

                <li class="nav_dropdown nav_icon">
                    <a href="javascript:;"><span class="ui-icon ui-icon-gear"></span>系统设置</a>

                    <div class="nav_menu">
                        <ul>
                            <li><a href="../page/sys_area.html">抄表辖区</a></li>
                            <li><a href="../page/sys_meterType.html">水表型号</a></li>
                            <li><a href="../page/sys_dept.html">部门管理</a></li>
                            <li><a href="../page/sys_emp.html">员工管理</a></li>
                            <li><a href="../page/sys_menupower.html">菜单权限设置</a></li>
                            <li><a href="../page/sys_areapower.html">辖区权限设置</a></li>
                            <li><a href="../page/sys_waterType.html">用水类型设定</a></li>
                            <li><a href="../page/sys_surcharge.html">附加费设定</a></li>
                            <li><a href="../page/sys_flow.html">流程配置</a></li>
                        </ul>

                    </div>
                </li>

                <li class="nav_current nav_dropdown nav_icon_only">
                    <a href="javascript:;">&nbsp;</a>

                    <div class="nav_menu">
                        <ul>
                            <li><a href="../workspace.html">我的工作台</a></li>
                            <li><a href="../page/sys_pwd.html">修改密码</a></li>
                            <li><a href="../login.html">退出系统</a></li>
                        </ul>
                    </div> &lt;!&ndash; .menu &ndash;&gt;
                </li>
            </ul>
        </div> &lt;!&ndash; .content_pad &ndash;&gt;

    </div> &lt;!&ndash; #header &ndash;&gt;

    <div id="masthead">
        <div>
            <span id="pagetitle"><a href="javascript:;">用户申请</a></span>
            <span id="welcome_span">欢迎回来，马云</span>
        </div>
    </div> &lt;!&ndash; #masthead &ndash;&gt;-->

    <div id="content" class="xgrid">
        <form id="f1">

            <div class="x12">

                <h2>
                    用户申请 - 办理分户业务
                    <a style="float:right" href="javascript:history.back(-1);">返回</a>
                </h2>

                <div class="tab_container" id="div1">
                    <ul class="tabs">
                        <li><a href="#tab1">申请表</a></li>
                        <li><a href="#tab2">原用户</a></li>
                        <li><a href="#tab3">新户详细表</a></li>
                    </ul>
                    <div class="tab_content_container">
                        <div id="tab1" class="tab_content">
                            <table width="100%">
                                <thead>
                                <tr>
                                    <th width="60"></th>
                                    <th width="220"></th>
                                    <th width="60"></th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>用户名称</td>
                                    <td><input name="userName" :value="orderUser!=''?orderUser[0].UserName:''"/></td>
                                    <td>用户类型</td>
                                    <td><select name="userType" style="width:158px;" id="leixin">
                                        <option :selected="orderUser==''?'':orderUser[0].UserType=='公户'?'selected':''">
                                            公户
                                        </option>
                                        <option :selected="orderUser==''?'selected':orderUser[0].UserType=='私户'?'selected':''">
                                            私户
                                        </option>
                                    </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>联系人</td>
                                    <td><input name="linkMan" :value="orderUser!=''?orderUser[0].LinkMan:''"/></td>
                                    <td>联系电话</td>
                                    <td><input name="phone" :value="orderUser!=''?orderUser[0].Phone:''"/></td>
                                </tr>
                                <tr>
                                    <td>用户地址</td>
                                    <td colspan="3"><input size="68" name="address"
                                                           :value="orderUser!=''?orderUser[0].Address:''"/></td>
                                </tr>
                                <tr>
                                    <td>用水量</td>
                                    <td><input name="maxAmount" :value="orderUser!=''?orderUser[0].MaxAmount:''"/></td>
                                    <td>申请表径</td>
                                    <td><select style="width:158px;" name="meterTypeID">
                                        <option v-for="m in meterType" :value="m.id" v-text="m.meterTypeName"
                                                :selected="orderUser==''?'':orderUser[0].MeterTypeID==m.id?'selected':''">
                                            DN10
                                        </option>
                                        <!--<option value="1" selected="selected">DN15</option>
                                        <option>DN20</option>
                                        <option>DN40</option>
                                        <option>DN80</option>
                                        <option>DN100</option>
                                        <option>DN200</option>
                                        <option>DN500</option>
                                        <option>DN1000</option>-->
                                    </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>房屋层次</td>
                                    <td><input name="houseHeight" :value="orderUser!=''?orderUser[0].HouseHeight:''"/>
                                    </td>
                                    <td>接水用途</td>
                                    <td><input name="useTarget" :value="orderUser!=''?orderUser[0].UseTarget:''"/></td>
                                </tr>
                                <tr>
                                    <td>备注说明</td>
                                    <td colspan="3"><input name="userRemark" size="68"
                                                           :value="orderUser!=''?orderUser[0].UserRemark:''"/></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div id="tab2" class="tab_content">
                            <div class="form label-inline uniform">


                                <div class="field">原用户编码<input name="oldUserNo" id="bian"
                                                               :value="orderUser!=''?orderUser[0].OldUserNo:u.userno"/>
                                    <button @click="dian()" class="btn btn-small" type="button">确定</button>
                                </div>
                                <div class="field">原用户姓名<input name="oldUserName"
                                                               :value="orderUser!=''?orderUser[0].OldUserName:u.username"
                                                               readonly/></div>
                                <div class="field">原用户电话<input name="oldUserPhone"
                                                               :value="orderUser!=''?orderUser[0].OldUserPhone:u.phone"
                                                               readonly/></div>
                                <div class="field">原用户表径<input name="oldMeter"
                                                               :value="orderUser!=''?orderUser[0].OldMeter:''"
                                                               id="meterID" readonly/></div>
                                <div class="field">原用户地址<input name="olduserAddr"
                                                               :value="orderUser!=''?orderUser[0].OlduserAddr:u.address"
                                                               readonly
                                                               size="50"/></div>


                            </div>
                        </div>
                        <div id="tab3" class="tab_content">
                            申请装表表数 <input id="t_meterCount" name="meterCount"
                                          :value="orderUser!=''?orderUser.length:'1'"/>
                            <button class="btn btn-small" onClick="setMeter();">确定</button>

                            <div id="meters">
                                <table class="data display">
                                    <thead>
                                    <tr>
                                        <th width="30">序号</th>
                                        <th width="160">姓名</th>
                                        <th width="160">电话</th>
                                        <th width="160">短信号码</th>
                                        <th width="160">地址</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-if="orderUser==''">
                                        <td>1</td>
                                        <td><input name="list[0].UserName"/></td>
                                        <td><input name="list[0].Phone"/></td>
                                        <td><input name="list[0].SMSPhone"/></td>
                                        <td><input name="list[0].Address"/></td>
                                        <td></td>
                                    </tr>
                                    <tr v-if="orderUser!=''" v-for="(o,index) in orderUser">
                                        <td v-text="index+1">1</td>
                                        <td><input :name="'list['+index+'].UserName'" :value="o.UserName"/></td>
                                        <td><input :name="'list['+index+'].Phone'" :value="o.Phone"/></td>
                                        <td><input :name="'list['+index+'].SMSPhone'" :value="o.SMSPhone"/></td>
                                        <td><input :name="'list['+index+'].Address'" :value="o.Address"/></td>
                                        <td></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>


            </div> <!-- .x12 -->
            <input type="hidden" name="type" value="2">
            <input type="hidden" name="panDuAn" id="panDuAn">
            <div id="tj"></div>
        </form>
        <div class="centerButtons">
            <button class="btn" type="button" @click="add()">办理</button>
            <button class="btn btn-grey" onClick="history.back(-1);">返回</button>
        </div>

    </div> <!-- #content -->

    <div id="footer">
        <div class="content_pad">
            <p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>. 技术支持 <a href="#">职业教育</a>.</p>
        </div> <!-- .content_pad -->
    </div> <!-- #footer -->

</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script src="/webjars/vue/2.5.17/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#content",
        data: {
            u: '',
            orderUser: '',
            meterType: '',
        },
        methods: {
            dian() {
                $.ajax({
                    url: "/be-order/be_request2UserQueryId",
                    type: "GET",
                    data: {"uid": $("#bian").val()},
                    datatype: "JSON",
                    success: function (json) {
                        app.u = json;
                        if (json == '') {
                            alert('没有该用户')
                            return;
                        }
                        $.ajax({
                            url: "/be-order/queryIdSyMeterType",
                            type: "GET",
                            data: {"sid": json.meterID},
                            datatype: "JSON",
                            success: function (json1) {
                                $("#meterID").val(json1.meterTypeName);
                            }
                        })
                    }
                })
            },
            add() { //添加方法
                swal({
                    title: '确定办理吗?',
                    //text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(function (isConfirm) {
                    if (isConfirm) {
                        var h = $("#t_meterCount").val();
                        $.ajax({
                            url: "/be-order/add",
                            type: "POST",
                            //contentType:"application/json",
                            data: $("#f1").serialize(),
                            success: function (msg) {
                                swal("", "办理成功!", "success");
                                if (msg == '保存成功') {
                                    $("#div1 input").val("");
                                    $("#t_meterCount").val(h);
                                }
                            }
                        })
                    }
                })
                /*if (confirm('确认办理吗？')) {

            }*/
            },
        },
        created() {
            this.$nextTick(() => { //同步渲染
                $.ajax({
                    url: "/be-order/queryAllSY_MeterType",
                    type: "GET",
                    //contentType:"application/json",
                    datatype: "JSON",
                    success: function (json) {
                        app.meterType = json;
                    }
                })
                if (uid != null) {
                    $("#panDuAn").val('修改');
                    $("#tj").append($("<input type='hidden' name='orderNo' value='" + uid + "'>"))
                    $.ajax({
                        url: "/be-order/queryAllOrderAndOrderUser",
                        type: "GET",
                        //contentType:"application/json",
                        data: {"orderNo": uid},
                        datatype: "JSON",
                        success: function (json) {
                            app.orderUser = json;
                            alert(JSON.stringify(app.orderUser))
                        }
                    })
                }
            });
        }
    });
</script>
<script type="text/javascript">

    $(document).ready(function () {
        Dashboard.init();

        //选项卡初始化
        $('.tab_container').tabs();
    });

</script>

</body>

</html>